<template>
    <UserLoginComponent>
        <div class="mx-3 my -2">
            <van-space direction="vertical" fill size="5.5%">
                <van-field v-model="phoneCardStore.phoneInputProps" name="phone" placeholder="请输入手机号" type="number"
                    :rules="[{ required: true, message: '请输入手机号' }]" clearable maxlength="11" />
                <van-row>
                    <van-col span="15">
                        <van-field v-model="phoneCardStore.phoneCodeInputProps" name="phoneCode" placeholder="请输入手机验证码"
                            type="number" :rules="[{ required: true, message: '请输入手机验证码' }]" maxlength="6" clearable />
                    </van-col>
                    <van-col span="9">
                        <van-button type="primary" @click="phoneCardStore.getPhoneCode" round
                            v-text="phoneCardStore.consolePrefix" style="width:100%" />
                    </van-col>
                </van-row>
            </van-space>
            <div class="w-full mt-4">
                <van-button type="primary" @click="phoneCardStore.userLogin" block round text="用户登录" />
            </div>
        </div>
    </UserLoginComponent>
</template>

<script setup lang="ts">
const phoneCardStore = usePhoneCardStore()
onBeforeMount(async () => {
    await phoneCardStore.initStore();
})
</script>

<style scoped></style>